<template>
  <div class="all">
    <div class="container" v-if="lis.length != 0">
        <div class="line"></div>
        <ul class="list">
            <li class="item" v-for="(item, index) in  lis" :key="index" :class="{ open: currentIndex == index }" @touchstart="touchStart" @touchend="touchEnd(index,$event)">
                <div class="left-content" @click="doSomething(index)" >
                    <img :src="item.picsUrl" alt="" class="avatar" @click="storhuaall(item,index)">
                    <div class="content" @click="storhuaall(item,index)"> 
                        <p>{{item.goodsName}}</p>
                         <div class="content-two">
                                    <div>赠品</div>
                                    <p>店铺满赠</p>
                         </div>
                           <div class="content-text">
                                  <div class="content-text-one">
                                      <div class="fuhao">￥</div>
                                      <p>{{item.orderPrice}}</p>
                                      <div class="textjiag">{{item.status}}{{item.quantityUnit}}起批</div>
                                  </div>
                                  <div class="content-text-two">
                                            <img src="../assets/img2.png" alt="" class="imgone">
                                            <img src="../assets/tabbar/ic_cart_default.png" alt="" class="imgtwo">
                                  </div>
                           </div>
                           <div class="shuigongsi">{{item.dealerName}}</div>
                    </div>
                </div>
                <div class="right-content" @click="deleteItem(index)" >取消收藏</div>
            </li>
        </ul>
    </div>











    <div v-else>
      <div class="null-shop">
              <div>
                  <img src="../assets/mifeng.png" alt="">
                  <p>您还没有收藏过宝贝</p>
              </div>
      </div>
    <div class="null-shopping">
       <div class="null-shopping-top">
         <div></div>
         <p>最近浏览</p>
       </div>
    </div>
    <div class="body-all" >
      <div class="alll">
       <div class="shop-left" v-for="(item,index) in reddingtwo" :key="index" @click="shopindex(index)" >
        <div class="shop-leftf" @click="Gotodetails(item)">
          <div class="shop-left-all">
               <img :src="item.picsUrl" alt="" class="img-one">
               <div class="shop-text">
                 <p>{{item.goodsName}}</p>
                 <div class="shop-text-one">
                <p>{{item.orderPrice}}</p> <img src="../assets/tabbar/ic_cart_default.png" alt="">
                 </div>
                  <div class="shop-text-two">成都康莱商贸有限公司</div>
               </div>
         </div>
        </div>
      </div>
      </div>

<div class="alll">
     <div class="shop-leftff" v-for="(itemm,index) in reddingone" :key="index"  >
        <div class="shop-leftf"  @click="Gotodetails(itemm)">
          <div class="shop-left-all">
               <img :src="itemm.picsUrl" alt="" class="img-one">
               <div class="shop-text">
                 <p>{{itemm.goodsName}}</p>
                 <div class="shop-text-one">
                <p>{{itemm.orderPrice}}</p> <img style="margin-left:0rem;" src="../assets/tabbar/ic_cart_default.png" alt="">
                 </div>
                  <div class="shop-text-two">成都康莱商贸有限公司</div>
               </div>
         </div>
        </div>
      </div>
    </div>
    </div>
     
   </div>
  </div>
</template>

<script>
import qs from 'qs'
export default {
    data(){
      return {
        putone:"商品",
        puttwo:"店铺",
        lis:[],
        neww:[],
        oldd:[],
        res:"",
        reddingone:"",
        reddinglis:"",
        reddingtwo:"",  
        startClientX: 0,
        endClientX: 0,
        currentIndex: null,
      }
    },
    methods:{
      // Gotodetailsm(itemm){
      // let skuid=itemm.skuId
      // this.$router.push({name:'details',query:{skuid:skuid}})
      // },
       Gotodetails(itemm){
      let skuid=itemm.skuId
      this.$router.push({name:'details',query:{skuid:skuid}})
    },
    storhuaall(item,index){
      //this.$store.commit("storhuaall",index)
      console.log(item)
      this.$router.push({name:'details',query:{skuid:item.goodsId}})
    },
        //滑动开始
        touchStart(e) {
            this.startClientX = e.touches[0].clientX;
        },
        touchEnd(index, e) {
         //   console.log(e);
            this.endClientX = e.changedTouches[0].clientX;
            if(this.startClientX - this.endClientX > 30 && index != this.currentIndex){
                this.currentIndex = index
            }

            if(this.endClientX - this.startClientX > 30) {
                this.currentIndex = null
            }

            this.startClientX = 0;
            this.endClientX = 0;
        },
       doSomething(index) {
            if(this.currentIndex >= 0) {
                this.currentIndex = null
            }else {
                alert(index)
            }
        },
        //删除滑块
        deleteItem(index) {
           //  console.log(index);
             this.$http.post('https://web-gateway.newbeescm.com/b2b-app-web/goodsColl/del',{
               skuId:this.lis[index].goodsId,
               source:0,
               userId:this.$store.state.userInfo.id
             },
             {
            headers: {
              token: this.$store.state.token,
              userId: this.$store.state.userInfo.id
            }
          }).then(res =>{
            console.log("删除成功第"+index,res)
          })

          //等到post发送成功才删除
              this.lis.splice(index,1);
              this.currentIndex = null;
        },





      shopindex(index){
     this.$store.commit('shopcollectone',index);
      },
      shopindext(index){
         //this.$store.commit('shopcollectone',this.lis.slice(this.res.data.result.list.length/2).length+ index);
        //  this.$router.push({path:'shezhilandetails'})
      },
    getGoodsRecordByUserId() {
      this.$http
        .post(
          "https://web-gateway.newbeescm.com/b2b-app-web/goodsColl/list",
       qs.stringify({
        merchantId:this.$store.state.merchantInfo.merchantId,
        storeId:this.$store.state.storeId.id,
        stationId:this.$store.state.stationId,
        pageNum:1,
        pageSize:10,
        isSelf:false,
        globalStoreId:8131,
        userId: this.$store.state.userInfo.id
      }),
          {
            headers: {
              token: this.$store.state.token,
              userId: this.$store.state.userInfo.id
            }
          }
        )
        .then(res => {
          console.log("all商品",res);
          this.res = res
          if (res.data.status.statusCode === 0) {
                     
            this.lis=res.data.result.list
            console.log( "收藏的商品", this.lis)
          }
        })
        .catch(err => {
          console.log(err);
        })
    },  
   redding() {
      this.$http
        .post(
          "https://web-gateway.newbeescm.com/b2b-app-web/getGoodsRecordByUserId",
       {
            dealerId: this.$store.state.merchantInfo.id,
            groupStoreId: this.$store.state.storeId.storeId,
            merchantId: this.$store.state.merchantInfo.merchantId,
            pageNum: 1,
            pageSize: 20,
            shopId: this.$store.state.storeId.storeId,
            stationId: this.$store.state.stationId,
            userId: this.$store.state.userInfo.id
      },
          {
            headers: {
              token: this.$store.state.token,
              userId: this.$store.state.userInfo.id
            }
          }
        )
        .then(res => {
       //   console.log("闪频收藏",res.data.result)
          //console.log("闪频收藏1",this.reddinglis.slice(0,res.data.result.length/2))
            this.reddinglis = res.data.result
            this.reddingone = this.reddinglis.slice(0,res.data.result.length/2)
            this.reddingtwo = this.reddinglis.slice(res.data.result.length/2)
            console.log("商店one", this.reddingone)
            console.log('商店two', this.reddingtwo )
        })
        .catch(err => {
          console.log(err);
        })
    },  
    },
    mounted(){
      this.getGoodsRecordByUserId()
      this.redding();
     // this.niupi()
    }

}

</script>
<style scoped lang="scss">
.content{
  p{
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  }
  .shuigongsi{
    font-size: 10px;
    color: #999999;
   // margin-top:0.1rem;
       position: absolute;
    bottom: 0rem;
    left: 0;
  }
  .content-text{
    position: absolute;
    bottom: 0.15rem;
    left: 0;
    margin-top: 0.28rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .content-text-one{
      display: flex;
      align-items: center;
      .textjiag{
        width: 1rem;
        font-size: 10px;
        color: #999999;
      }
      .fuhao{
        font-size: 0.1rem;
        color: #DD3333;
      }
         p{
           color: #DD3333;
           width: 0.5rem;
        }
    }
    .content-text-two{
      display: flex;
      align-items: center;
      .imgone{
        width: 0.16rem;
        height: 0.16rem;
      }
      .imgtwo{
        margin-left: 0.2rem;
               width: 0.2rem;
        height: 0.2rem;
      }
    }
  }
  height: 1rem;
  position: relative;
  width: 63%;
    height:1rem;
   p{
     font-size: 14px;
     color: #333333;
     width: 100%;
   }
   .content-two{
     display: flex;
     align-items: center;
     position: absolute;
     bottom: 0.42rem;
     left: 0;
     font-size: 0.1rem;
      color: #DD3333;
     p{
          width: 0.51rem;
          height: 0.14rem;
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 0.1rem;
          color: #DD3333;
     }
     div{
       width: 0.32rem;
       height: 0.14rem;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 0.06rem;
     }
     div::after{
       content: "";
       position: absolute;
       width: 200%;
       height: 200%;
       border: 1px solid red;
       transform: scale(0.5,0.5)   
     }
     p::after{
              content: "";
       position: absolute;
       width: 200%;
       height: 200%;
       border: 1px solid red;
       transform: scale(0.5,0.5)  
     }
     
   }
}

.list {
    overflow: hidden;
}
.item {
    height: 1.6rem;
    display: flex;
    align-items: center;
    position: relative;   
    padding: 0 0.18rem;
    box-sizing: border-box;
    transform: translate(0, 0); 
    transition: transform 0.3s;
}
.item:after {
    content: " ";
    position: absolute;
    left: 0.18rem;
    right: 0;
    bottom: 0;
    border-bottom: 1px solid #eee;
}
.left-content {
    display: flex;
    align-items: center;
    position: absolute;
    left: 0.18rem;
    right: 0.18rem;
    top: 0;
    bottom: 0;
}
.avatar {
    width: 1rem;
    height: 1rem;
    background: #ff0000;
    margin-right: 0.18rem;
}
.content {
    font-size: 0.12rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.right-content {
    width: 1rem;
    height: 1.6rem;
    background: #ff0000;
    line-height: 1.6rem;
    font-size: 0.16rem;
    text-align: center;
    position: absolute;
    right: -2rem;
    color: #fff;
}
.open {
    transform: translate(-2rem,0)
}






.all{
  background: #FFFFFF;
}
.alll{
  display: flex;
  flex-direction: column;
  width: 46%;
  //flex: 1;
}
.body-all{
  display: flex;
  .shop-left{
    margin-left: 0.14rem;
  }
.shop-leftff{
   padding-left: 0.2rem;
}
.shop-left,.shop-leftff{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  position: relative;
  //margin-left: 0.14rem;
  .shop-leftf{
  width: 100%;
  height: 100%;
    display: flex;
  flex-direction: column;
      .shop-left-all{
    .img-one{
      width: 1.6rem;
      height: 1.6rem;
      margin: 0.14rem 0;
    }
      .shop-text{
         display: flex;
         flex-direction: column;
         p{
           overflow: hidden;
           text-overflow:ellipsis;
           white-space: nowrap;
           width: 87%;
         }
         .shop-text-one{
           width: 100%;
           display: flex;
          //  justify-content: space-around;
          //  align-items: center;
           img{
             width: 0.14rem;
             height: 0.14rem;
           }
           p{
           color: #DD3333;
           }
           margin:0.12rem 0 0.05rem 0; 
         }
         .shop-text-two{
           font-family: PingFangSC-Regular;
           font-size: 10px;
           color: #999999;
           margin-bottom: 0.14rem;
          // letter-spacing: -0.24px;
           //line-height: 10px;
         }
      }
  }
  }

}
}
// .shop-left::after{
//   content: ""  ;
// position: absolute;
//  width: 200%;
//  height: 200%;
//  border-bottom: 1px solid  #F2F1F6;
//  transform: scale(0.5,0.5);
//  border-right: 1px solid #F2F1F6;
// }
// .shop-leftff::after{
//   content: ""  ;
// position: absolute;
//  width: 200%;
//  height: 200%;
//  border-bottom: 1px solid  #F2F1F6;
//  transform: scale(0.5,0.5);
// }
.null-shopping{
  background: #FFFFFF;
  height: 0.4rem;
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
  justify-content: center;
  .null-shopping-top{
        width: 100%;
        align-items: center;
        height: 100%;
        display: flex;
        div{
          margin: 0 0.05rem 0 0.14rem;
          background:  red;
          height: 0.14rem;
          width: 0.02rem;
          border-radius: 2px;
        }
  }
}
// .null-shopping::after{
// content: ""  ;
// position: absolute;
//  width: 200%;
//  height: 200%;
//  border-bottom: 1px solid  #F2F1F6;
//  transform: scale(0.5,0.5);
// }
.null-shop{
  height: 1.9rem;
  background: #F2F1F6;
  width: 100%;
      display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  div{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    img{
      width: 1.34rem;
      height:0.74rem;
      
    }
    p{
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #999999;
        letter-spacing: 0;
        line-height: 14px;
        margin-top: 0.2rem;
    }
  }
}
</style>